import React, { useState,useEffect} from "react";
import { Card, List } from "antd";

import TodoInput from "./components/todo-input";
import TodoBottom from "./components/todo-bottom";
import ListItemLeft from './components/list-item-left';
import InputItem from './components/input-item';


function App() {
  const [todoArr, setTodoArr] = useState([]);//实际数据
  const [showArr, setShowArr] = useState([]);//用于展示的数据
  const [isFirst, setIsFirst] = useState(true);//判断是否是第一次点击全选
  const [isActive, setIsActive] = useState('all');//控制底部按钮的选中样式
  console.log(showArr);
  //添加数组元素
  const handleAddArr = (e) => {
    const newArr = JSON.parse(JSON.stringify(todoArr));
    const inputValue = e.target.value;
    const objArrItem = {
      isCompleted: false,
      desc: inputValue,
    };
    newArr.push(objArrItem);
    setTodoArr(newArr);
    setShowArr(newArr);
  };
  //点击列表元素改变状态
  const handleClickItem = (item, index) => {
    const newArr = JSON.parse(JSON.stringify(todoArr));
    const newObj = {
      isCompleted: !item.isCompleted,
      desc: item.desc,
    };
    newArr[index] = newObj;
    setTodoArr(newArr);
    setShowArr(newArr);
  };
  //删除列表中的元素
  const handleClickDel = (item, index) => {
    const newArr = JSON.parse(JSON.stringify(todoArr));
    newArr.splice(index, 1);
    setTodoArr(newArr);
    setShowArr(newArr);
  };
  // 上方输入框左侧图片点击事件，实现遍历数组改变状态
  const handleClickTodoInputLeft = () => {
    const newArr = JSON.parse(JSON.stringify(todoArr));
    if (isFirst) {
      newArr.forEach((itemObj) => {
        itemObj.isCompleted = true;
      });
      setIsFirst(false);
    } else {
      newArr.forEach((itemObj) => {
        itemObj.isCompleted = false;
      });
      setIsFirst(true);
    }
    setTodoArr(newArr);
    setShowArr(newArr);
  };

  useEffect(() => {
    const newArr = JSON.parse(JSON.stringify(todoArr));
    switch (isActive) {
        case "all":
          setShowArr(newArr);
          setTodoArr(newArr);
          break;
        case "active":
          const activeArr = newArr.filter((item) => {
            return item.isCompleted === false;
          });
          setShowArr(activeArr);
          break;
        case "completed":
          const completedArr = newArr.filter((item) => {
            return item.isCompleted === true;
          });
          setShowArr(completedArr);
          break;
        case "clearCompleted":
          newArr.filter((item,index) => {
            if(item.isCompleted === true){
              newArr.splice(index,1);
            }
          });
          setShowArr(newArr);
          setTodoArr(newArr);
          break;
        default:
          break;
      }
  }, [isActive])

  //底部点击不同类型按钮过滤展示列表数据
  const handleClickBottom = (e) => {
    let type = e.target.getAttribute("type");
    setIsActive(type)
  };

  const handleOnchangeValue=(index,inputValue)=>{
    let arr=[...todoArr];
    arr[index].desc=inputValue;
    setTodoArr(arr);
    setShowArr(arr);
  }


  return (
    <div className="app-page">
      <div className="todo-title">todos</div>
      <Card hoverable style={{ width: 550 ,borderRadius:20}}>
        <List
          style={{ width: 550 ,borderRadius:20}}
          header={
            <TodoInput
              handleAddArr={handleAddArr}
              handleClickTodoInputLeft={handleClickTodoInputLeft}
            />
          }
          footer={<TodoBottom handleClickBottom={handleClickBottom} todoArr={todoArr} isActive={isActive}/>}
          bordered
          dataSource={showArr}
          renderItem={(item, index) => (
            <List.Item className="list-item">
              <div
                className="left"
                onClick={() => handleClickItem(item, index)}
              >
                <ListItemLeft isCompleted={item.isCompleted} />
              </div>

              <div className="desc">
                <InputItem index={index} item={item}
                handleOnchangeValue={handleOnchangeValue} />
              </div>
              
              <div
                className="right-del"
                onClick={() => handleClickDel(item, index)}
              >
                x
              </div>
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
}
export default App;
